
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 下面两种 v-bind-class的方式都可以 -->
			<div 
				class="test"
				v-bind:class="{active : isActive, green : isGreen}"
				v-bind:class="[isActive ? 'active' : '', isGreen ? 'green' : '']"
				style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
				hi vue
			</div>
			
			<div :style="{color : color, fontSize : size, background: isRed ? '#FF0000' : ''}">
				hi vue
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data:{
					isGreen: true,
					isActive: true,
					color: '#FFFFFF',
					size: '50px',
					isRed: true
				}
			});
		</script>
		<style type="text/css">
			.test{font-size: 40px;}
			.active{background-color: #FF0000;}
			.green{color: green;};
		</style>
	</body>
</html>
